<script setup lang="ts">
import {DescriptionsTree} from "@/interfaces/components/Descriptions";
import {Authentication} from "@/interfaces/views/vehicle/driver";
import {defineEmits, h, ref} from "vue";
import {useDriverAuthenticationApi, useGetDriverInfoApi} from "@/api/vehicle/driver";
import CdlDescriptions from "@/components/descriptions";
import CdlImage from "@/components/Image"
import {ElButton, ElLoading, ElMessage, ElMessageBox} from "element-plus"
import constant from "@/utils/constant";

const props = defineProps({
  id:{
    required: true,
    type: String
  },
  query: {
    required: true,
    type: Function
  }
})
const emit = defineEmits(["close"])
const loading = ElLoading.service({
  lock: true,
  text: 'Loading',
  background: 'rgb(255,255,255, 0.9)',
})

init()
const authDescriptionsTree: DescriptionsTree<Authentication> = [
  {label: "紧急联系人", prop: "emergencyContact", minWidth: 300},
  {label: "身份证号码", prop: "idNum", minWidth: 300},
  {label: "紧急联系人手机号", prop: "emergencyContactPhone", minWidth: 250},
  {label: "驾驶证发证机关", prop: "drivingLicenseIssuingAuthority"},
  {label: "驾驶证有效期"},
  {label: "驾驶证号", prop: "drivingLicenseNum"},
  {label: "从业资格证编号", prop: "qualificationCertificateNum"},
  {label: "居住地址", prop: "address"},
  {label: "银行卡号", prop: "creditCardNum"},
  {label: "身份证正面", prop: "idCardObvImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "身份证背面", prop: "idCardRevImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "驾驶证", prop: "drivingLicenseImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "道路运输从业资格证", prop: "transportPermitImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "手持证件照", prop: "peopleLicenseImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
]
const authData = ref({})
function init(){
  useGetDriverInfoApi(props.id).then(res => {
    authData.value = res.data
    loading.close()
  })
}

/**
 * 同意
 */
function ratify(){
  useDriverAuthenticationApi({
    id: props.id,
    status: 2
  }).then(()=>{
    ElMessage.success("认证成功！")
    emit("close")
    props.query({
      status: 3
    })
  })
}

/**
 * 驳回
 */
function reject(){
  ElMessageBox.prompt('', '请填写驳回原因', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    useDriverAuthenticationApi({
      id: props.id,
      status: 1,
      overruleCause: value
    }).then(()=>{
      ElMessage.success("驳回成功！")
      emit("close")
      props.query({
        status: 3
      })
    })
  })
}
</script>

<template>
    <h3 style="margin-bottom: 10px">认证人：<span style="margin-left: 15px">{{ authData.name }}</span></h3>
    <CdlDescriptions :model="authData" :template-tree="authDescriptionsTree"></CdlDescriptions>
    <div style="text-align: center; margin-top: 15px">
      <ElButton type="primary" @click="ratify">同意</ElButton>
      <ElButton type="danger" @click="reject">驳回</ElButton>
    </div>
</template>
